<template>
	<view>
		<view class="container p-bottom">
			<!-- tab栏 -->
			<view class="header f-28 col-3">
				<view @tap="bindHeaderTap" :class="[dataType==='all'?'active':'']" data-type="all">
					<text>全部</text>
				</view>
				<view @tap="bindHeaderTap" :class="[dataType==='payment'?'active':'']" data-type="payment">
					<text>待付款</text>
				</view>
				<view @tap="bindHeaderTap" :class="[dataType==='sharing'?'active':'']" data-type="sharing">
					<text>拼团中</text>
				</view>
				<view @tap="bindHeaderTap" :class="[dataType==='delivery'?'active':'']" data-type="delivery">
					<text>待发货</text>
				</view>
				<view @tap="bindHeaderTap" :class="[dataType==='received'?'active':'']" data-type="received">
					<text>待收货</text>
				</view>
				<view @tap="onTargetRefund">
					<text>售后</text>
				</view>
			</view>
			<!-- 订单列表 -->
			<view class="goods-detail-box">
				<scroll-view @scrolltolower="bindDownLoad" scroll-y style="width: 750upx;margin-top:88upx;" :style="[{'height' : Height}]">
					<view class="wrapper" v-if=" list.data && list.data.length > 0">
						<view class="m-top20" v-for="(item,index) in list.data" :key="index">
							<form @submit="navigateToDetail" report-submit="true" :data-id="item.order_id ">
								<button class="btn-normal" form-type="submit" >
									<!-- 订单状态 -->
									<view class="order-box b-f">
										<view class="order-header dis-flex">
											<text class="col-m">{{ item.state_text }}</text>
										</view>
									</view>
									<!-- 商品信息 -->
									<view class="order-box order-img_list">
										<view class="detail-goods b-f dis-flex flex-dir-row">
											<view class="left">
												<image class="goods-image" :src="item.goods[0].image.file_path"></image>
											</view>
											<view class="right dis-flex flex-box flex-dir-column flex-x-around">
												<view class="goods-name">
													<text class="twolist-hidden">{{ item.goods[0].goods_name }}</text>
												</view>
												<view class="dis-flex col-9 f-24">
													<view class="flex-box">{{ item.goods[0].goods_attr }}</view>
													<text class="t-r">×{{ item.goods[0].total_num }}</text>
												</view>
											</view>
										</view>
									</view>
								</button>
								<!-- 底部区 -->
								<view class="order-box b-f">
									<view class="order-btn dis-flex">
										<view class="order-left dis-flex flex-y-center">
											<view class="text">
												<text>合计：</text>
												<text class="col-m">￥{{item.pay_price}}</text>
											</view>
										</view>
										<view class="order-right flex-box">
											<view class="btn-group clear" v-if="item.order_status.value != 20 ">
												<!-- 未支付取消订单 -->
												<view v-if=" item.pay_status.value==10 " class="btn-group-item">
													<view @tap="cancelOrder" class="btn-default" :data-id="item.order_id">取消</view>
												</view>
												<!-- 已支付取消订单 -->
												<view v-if=" item.order_status.value!=21 && item.order_type.value==10 && item.pay_status.value==20 && item.delivery_status.value==10 "
												 class="btn-group-item">
													<view @tap="cancelOrder" class="btn-default" :data-id="item.order_id">申请取消</view>
												</view>
												<view v-if=" item.order_status.value==21 " class="f-28 col-8 t-r">取消申请中</view>
												<!-- 订单付款 -->
												<view v-if="item.pay_status.value==10" class="btn-group-item">
													<view @tap="onPayOrder" class="btn-main" :data-id="item.order_id">付款</view>
												</view>
												<!-- 订单核销码 -->
												<view v-if=" item.pay_status.value==20 && item.delivery_type.value == DeliveryTypeEnum.EXTRACT.value && item.delivery_status.value == 10 && (item.order_type.value==20 ? item.active.status.value==20 : true ) && item.order_status.value!=21 "
												 class="btn-group-item">
													<view @tap="onExtractQRCode" class="btn-main" :data-id="item.order_id">
														<text class="iconfont icon-qr-extract"></text>
														<text class="m-l-10">核销码</text>
													</view>
												</view>
												<!-- 确认收货 -->
												<view v-if="item.delivery_status.value==20 && item.receipt_status.value == 10" class="btn-group-item">
													<view @tap="receipt" class="btn-main" :data-id="item.order_id">确认收货</view>
												</view>
												<!-- 订单评价 -->
												<view v-if="item.order_status.value==30 && item.is_comment==0" class="btn-group-item">
													<view @tap="comment" class="btn-default" :data-id="item.order_id">评价</view>
												</view>
												<!-- 拼单详情 -->
												<view v-if="item.order_type.value==20 && item.pay_status.value==20" class="btn-group-item">
													<form @submit="navigateToSharingActive" report-submit="true" :data-id=" item.active_id ">
														<button class="btn-normal" form-type="submit">
															<view class="btn-default">拼单详情</view>
														</button>
													</form>
												</view>
											</view>
										</view>
									</view>
								</view>
							</form>
						</view>
					</view>
					<view v-if=" no_more " class="no-more f-30">亲, 没有更多了</view>
					<view v-if=" !isLoading && !list.data.length ">
						<view class="yoshop-notcont">
							<text class="iconfont icon-wushuju"></text>
							<text class="cont">亲，您还没有订单信息哦！</text>
							<navigator url="../../sharing/index/index">去开团</navigator>
						</view>
					</view>
				</scroll-view>
			</view>

			<!-- 核销码弹出层 -->
			<zan-popup class="pop pop--bottom" :class="[showQRCodePopup ? 'pop--show' : '']" @close="onToggleQRCodePopup">
				<view class="pop__mask"></view>
				<view class="pop__container">
					<view class="pop-qrcode pop-example__container">
						<view class="pop-title">
							<text class="f-30">核销二维码</text>
						</view>
						<view class="pop-content">
							<image :src=" QRCodeImage "></image>
						</view>
					</view>
				</view>
			</zan-popup>

			<!-- 支付方式弹窗 -->
			<zan-popup  v-if="showPayPopup" :class="[showPayPopup ? 'pop--show' : '']" @tap="onClosePayPopup">
				<view class="pop__mask "></view>
				<view class="pop__container">
					<view class="pop-orderPay pop-example__container">
						<view class="pop-title">
							<text class="f-30">请选择支付方式</text>
						</view>
						<view class="pop-content">
							<view class="pay-method">
								<form @submit="onSelectPayType" :data-value="PayTypeEnum.WECHAT.value" report-submit="true">
									<button form-type="submit" class="btn-normal">
										<view class="pay-item dis-flex flex-x-between">
											<view class="item-left dis-flex flex-y-center">
												<view class="item-left_icon wechat">
													<text class="iconfont icon-weixinzhifu"></text>
												</view>
												<view class="item-left_text">
													<text>{{ PayTypeEnum.WECHAT.name }}</text>
												</view>
											</view>
										</view>
									</button>
								</form>
								<form @submit="onSelectPayType" :data-value="PayTypeEnum.BALANCE.value" report-submit="true">
									<button form-type="submit" class="btn-normal">
										<view class="pay-item dis-flex flex-x-between">
											<view class="item-left dis-flex flex-y-center">
												<view class="item-left_icon balance">
													<text class="iconfont icon-qiandai"></text>
												</view>
												<view class="item-left_text">
													<text>{{ PayTypeEnum.BALANCE.name }}</text>
												</view>
											</view>
										</view>
									</button>
								</form>
							</view>
						</view>
					</view>
				</view>
			</zan-popup>

		</view>
	</view>
</template>

<script>
	// 枚举类：发货方式
	import DeliveryTypeEnum from '../../../utils/enum/DeliveryType.js';

	// 枚举类：支付方式
	import PayTypeEnum from '../../../utils/enum/order/PayType'
	
	import zanpopup from '../../../components/popup/popup.vue'

	export default {
		components: {
			zanpopup
		},
		computed: {
			Height() {
				return uni.upx2px(this.scrollHeight * 2) + 'px';
			}
		},
		data() {
			return {
				dataType: 'all', // 列表类型
				list: [], // 订单列表
				scrollHeight: null, // 列表容器高度

				DeliveryTypeEnum, // 配送方式
				PayTypeEnum, // 支付方式

				no_more: false, // 没有更多数据
				isLoading: true, // 是否正在加载中

				page: 1, // 当前页码

				showQRCodePopup: false, // 核销码弹窗显示隐藏
				QRCodeImage: '', // 核销码图片
				showPayPopup:null,
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			let _this = this;
			_this.setListHeight();
			this.dataType = options.type || 'all';
			this.setData({
				dataType: this.dataType
			});
		},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow() {
			// 获取订单列表
			
			this.getOrderList(this.dataType);
		},

		methods: {

			/**
			 * 获取订单列表
			 */
			getOrderList(isPage, page) {
				let _this = this;
				_this._get('sharing.order/lists', {
					page: page || 1,
					dataType: _this.dataType
				}, result => {
					// console.log(result)
					let resList = result.data.list,
						dataList = _this.list;
					if (isPage == true) {
						_this.setData({
							'list.data': dataList.data.concat(resList.data),
							isLoading: false,
						});
					} else {
						_this.setData({
							list: resList,
							isLoading: false,
						});
					}
				});
			},

			/**
			 * 切换标签
			 */
			bindHeaderTap(e) {
				this.setData({
					dataType: e.currentTarget.dataset.type,
					list: {},
					isLoading: true,
					page: 1,
					no_more: false,
				});
				// 获取订单列表
				this.getOrderList(e.currentTarget.dataset.type);
			},

			/**
			 * 取消订单
			 */
			cancelOrder(e) {
				let _this = this;
				let order_id = e.currentTarget.dataset.id;
				uni.showModal({
					title: "友情提示",
					content: "确认要取消该订单吗？",
					success(o) {
						if (o.confirm) {
							_this._post_form('sharing.order/cancel', {
								order_id
							}, result => {
								_this.getOrderList(_this.dataType);
							});
						}
					}
				});
			},

			/**
			 * 确认收货
			 */
			receipt(e) {
				let _this = this;
				let order_id = e.currentTarget.dataset.id;
				uni.showModal({
					title: "提示",
					content: "确认收到商品？",
					success(o) {
						if (o.confirm) {
							_this._post_form('sharing.order/receipt', {
								order_id
							}, result => {
								_this.getOrderList(_this.dataType);
							});
						}
					}
				});
			},

			/**
			 * 点击付款按钮
			 */
			onPayOrder(e) {
				let _this = this;
				// 记录订单id
				_this.setData({
					payOrderId: e.currentTarget.dataset.id
				});
				// 显示支付方式弹窗
				_this.onTogglePayPopup();
			},

			/**
			 * 选择支付方式
			 */
			onSelectPayType(e) {
				let _this = this;
				// 隐藏支付方式弹窗
				_this.onClosePayPopup();
				if (!_this.showPayPopup) {
					// 发起付款请求
					_this.payment(_this.payOrderId, e.currentTarget.dataset.value);
				}
			},

			/**
			 * 显示/隐藏支付方式弹窗
			 */
			onTogglePayPopup() {
				this.setData({
					showPayPopup: !this.showPayPopup
				});
			},
			
			/**
			 * 隐藏支付方式弹窗
			 */
			onClosePayPopup() {
				this.setData({
					showPayPopup: false
				});
			},

			/**
			 * 发起付款请求
			 */
			payment(orderId, payType) {
				let _this = this;

				// 显示loading
				uni.showLoading({
					title: '正在处理...',
				});
				_this._post_form('sharing.order/pay', {
					order_id: orderId,
					payType: payType
				}, result => {
					if (result.code === -10) {
						_this.showError(result.msg);
						return false;
					}

					// 发起微信支付
					if (result.data.pay_type == PayTypeEnum.WECHAT.value) {
						_this.wxPayment({
							payment: result.data.payment,
							success() {
								// 跳转到已付款订单
								uni.navigateTo({
									url: '../order/detail/detail?order_id=' + orderId
								});
							},
							fail() {
								_this.showError(result.msg.error);
							},
						});
					}

					// 余额支付
					if (result.data.pay_type == PayTypeEnum.BALANCE.value) {
						_this.showSuccess(result.msg.success, () => {
							// 跳转到已付款订单
							uni.navigateTo({
								url: '../order/detail/detail?order_id=' + orderId
							});
						});
					}

				}, null, () => {
					uni.hideLoading();
				});
			},

			/**
			 * 订单评价
			 */
			comment(e) {
				let _this = this;
				let order_id = e.currentTarget.dataset.id;
				uni.navigateTo({
					url: './comment/comment?order_id=' + order_id,
				})
				console.log(order_id);
			},

			/**
			 * 跳转订单详情页
			 */
			navigateToDetail(e) {
				let _this = this;
				// 记录formId				
				_this.saveFormId(e.detail.formId);
				let order_id = e.currentTarget.dataset.id;
				uni.navigateTo({
					url: './detail/detail?order_id=' + order_id
				});
			},

			/**
			 * 跳转到拼团详情
			 */
			navigateToSharingActive(e) {
				let _this = this;
				// 记录formId
				_this.saveFormId(e.detail.formId);
				let active_id = e.currentTarget.dataset.id;
				uni.navigateTo({
					url: '../active/active?active_id=' + active_id
				});
			},

			/**
			 * 跳转到售后列表
			 */
			onTargetRefund() {
				uni.navigateTo({
					url: './refund/index'
				});
			},

			onPullDownRefresh() {
				uni.stopPullDownRefresh();
			},

			/**
			 * 下拉到底加载数据
			 */
			bindDownLoad() {
				// 已经是最后一页
				if (this.page >= this.list.last_page) {
					this.setData({
						no_more: true
					});
					return false;
				}
				// 加载下一页列表
				this.getOrderList(true, ++this.page);
			},

			/**
			 * 设置商品列表高度
			 */
			setListHeight() {
				let systemInfo = uni.getSystemInfoSync(),
					upx = systemInfo.windowWidth / 750, // 计算upx
					tapHeight = Math.floor(upx * 88), // tap高度
					scrollHeight = systemInfo.windowHeight - tapHeight; // swiper高度
				this.setData({
					scrollHeight
				});
			},

			/**
			 * 查看核销二维码
			 */
			onExtractQRCode(e) {
				let _this = this,
					order_id = e.currentTarget.dataset.id;
				// 调用后台api获取核销二维码
				uni.showLoading({
					title: '加载中',
				});
				_this._get('sharing.order/extractQrcode', {
					order_id
				}, (result) => {
					// 设置二维码图片路径
					_this.setData({
						QRCodeImage: result.data.qrcode
					});
					// 显示核销二维码
					_this.onToggleQRCodePopup();
				}, null, () => {
					uni.hideLoading();
				});
			},

			/**
			 * 核销码弹出层
			 */
			onToggleQRCodePopup() {
				let _this = this;
				_this.setData({
					showQRCodePopup: !_this.showQRCodePopup
				});
			},

		}
	}
</script>

<style>
	.container {
		/* font-size: 28upx; */
	}

	.header {
		width: 100%;
		height: 88upx;
		border-bottom: 1upx solid #e4e4e4;
		display: flex;
		background: #fff;
		line-height: 88upx;
		position: fixed;
		top: 0;
		z-index: 100;		
		/* #ifdef H5 */
		margin-top: 86upx;
		/* #endif */
	}

	.header view {
		flex: 1;
		text-align: center;
		padding: 0 15upx;
	}

	.header view text {
		display: block;
	}

	.header view.active {
		color: #fd4a5f;
	}

	.header view.active text {
		border-bottom: 1px solid #fd4a5f;
	}

	/* 商品列表 */

	.goods-detail-box {
		font-size: 28upx;
	}

	.order-box {
		padding: 0 25upx;
	}

	.order-header {
		padding: 18upx 0;
	}

	.order-cont {
		padding: 15upx 0;
		justify-content: space-between;
	}

	.order-cont .order-num text,
	.order-cont .order-time text {
		color: #777;
		font-size: 26upx;
	}

	.order-shop {
		padding: 16upx 0 16upx 0;
	}

	.order-shop-left,
	.order-shop-left image {
		width: 160upx;
		height: 160upx;
		/* border: 1upx solid #e4e4e4; */
		margin-right: 15upx;
		display: inline-block;
		background: #fff;
	}

	.order-shop .num {
		float: right;
	}

	.order-btn {
		padding: 18upx 0 18upx 0;
		z-index: 9;
	}

	.order-btn .order-left text,
	.order-btn .order-left .text {
		font-size: 29upx;
	}

	.order-btn .order-left .text {
		color: #888;
	}

	.order-btn .order-right .btn-group {
		margin-bottom: -10upx;
	}

	.order-btn .order-right .btn-group .btn-group-item {
		margin: 0 0 10upx 10upx;
		float: right;
	}

	.order-btn .order-right .btn-group .btn-group-item .btn-default {
		border-radius: 4px;
		border: 1upx solid #ccc;
		padding: 6upx 20upx;
		font-size: 28upx;
		color: #555;
	}

	.order-btn .order-right .btn-group .btn-group-item .btn-main {
		border-radius: 4px;
		border: 1upx solid #fd4a5f;
		padding: 6upx 20upx;
		font-size: 28upx;
		color: #fd4a5f;
	}

	.order-list-box .left {
		flex: 4;
		overflow: hidden;
		position: relative;
	}

	.order-list-box .right {
		flex: 1;
	}

	.goods-number {
		font-size: 28upx;
		color: #777;
	}

	.user-orderJtou {
		font-size: 24upx;
	}

	.order-img_list {
		background: #fff;
		border-top: 1upx solid #f8f8f8;
		border-bottom: 1upx solid #f8f8f8;
	}

	/* 商品详情 */

	.detail-goods {
		padding: 18upx;
	}

	.detail-goods .left .goods-image {
		display: block;
		width: 150upx;
		height: 150upx;
	}

	.detail-goods .right {
		padding-left: 25upx;
	}

	.detail-goods .right .goods-name {
		color: #333;
	}

	.yoshop-notcont navigator {
		background: #fd4a5f;
		height: 30px;
		line-height: 30px;
		font-size: 28upx;
		width: 200upx;
		margin: 0 auto;
		border-radius: 5px;
		text-align: center;
		color: #f8f8f8;
		margin-top: 25upx;
	}

	/* 弹出层 */

	.pop-example__container {
		background: #fff;
		padding: 30upx 40upx;
		border-radius: 10upx;
		min-width: 460upx;
	}

	.pop-example__container .pop-title {
		text-align: center;
	}

	.pop-content {
		margin-top: 30upx;
	}

	/* 弹出层：核销码 */

	.pop-qrcode .pop-content image {
		display: block;
		width: 460upx;
		height: 460upx;
	}

	/* 弹出层：支付方式 */

	.pop-orderPay .pop-title {
		text-align: left;
	}

	.pay-method .pay-item {
		padding: 20upx 0;
		font-size: 28upx;
		/* border-bottom: 1upx solid rgb(248, 248, 248); */
	}

	.pay-method .pay-item .item-left_icon {
		margin-right: 20upx;
		font-size: 32upx;
	}

	.pay-method .pay-item .item-left_icon.wechat {
		color: #00c800;
	}

	.pay-method .pay-item .item-left_icon.balance {
		color: #ff9700;
	}

	.pop-poster {
		position: relative;
		background: #fff;
		padding: 42upx;
		border-radius: 10upx;
	}

	/* 关闭按钮 */

	.pop-poster .pop-close {
		position: absolute;
		width: 56upx;
		height: 56upx;
		background: #fff;
		border-radius: 50%;
		box-shadow: 0 0 25upx rgba(0, 0, 0, 0.15);
		right: -28upx;
		top: -28upx;
	}

	.pop-poster .pop-close text {
		display: block;
	}

	.pop-poster .poster__image {
		padding: 0 40upx;
	}

	.pop-poster .poster__image image {
		box-shadow: 0 0 25upx rgba(0, 0, 0, 0.15);
		width: 460upx;
		height: 696.746upx;
	}

	.pop-poster .profile-btn button {
		margin-bottom: 0;
	}

	/* sku选择器 */

	.sku-selector {
		padding: 30upx 20upx;
	}

	/* 确认购买弹窗 */

	.popup__trade {
		width: 750upx;
		position: relative;
		padding-bottom: 92upx;
		z-index: 999;
	}

	.popup__trade .trade-close {
		position: absolute;
		top: 20upx;
		right: 20upx;
		width: 50upx;
		height: 50upx;
	}

	.popup__trade .trade-main {
		background: #fff;
		box-sizing: border-box;
		padding: 24upx;
	}

	.popup__trade .footer-fixed {
		position: absolute;
	}

	.popup__trade .trade-main .goods-info {
		margin-bottom: 10upx;
	}

	.popup__trade .trade-main .goods-info .goods-image {
		margin-top: -40px;
		margin-right: 20upx;
	}

	.popup__trade .trade-main .goods-info .goods-image image {
		width: 90px;
		height: 90px;
		border: 5upx solid #fff;
		box-shadow: 0 4upx 10upx rgba(220, 220, 220, 0.79);
	}

	.popup__trade .trade-main .goods-info .money-box {
		margin: 0;
	}

	.popup__trade .trade-main .goods-info .goods-stock {
		padding-left: 10upx;
	}

	.popup__trade .trade-main .buy_number {
		margin: 20upx 0;
		justify-content: space-between;
	}

	.popup__trade .trade-main .buy_number .buyNumber {
		color: #888;
		background: #fff;
		border-radius: 10upx;
		margin-bottom: 10upx;
	}
	
	.pop--show {
		visibility: visible
	}
		
	.pop__mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 14;
		background: rgba(0, 0, 0, .5);
		display: none
	}
		
	.pop__mask--hide {
		background: 0 0
	}
		
	.pop__container {
		position: fixed;
		left: 50%;
		top: 50%;
		-webkit-transform: translate3d(-50%, -50%, 0);
		transform: translate3d(-50%, -50%, 0);
		-webkit-transform-origin: center;
		transform-origin: center;
		-webkit-transition: all .2s ease;
		transition: all .2s ease;
		z-index: 15;
		opacity: 0
	}
		
	.pop--show .pop__container {
		opacity: 1
	}
		
	.pop--show .pop__mask {
		display: block
	}
		
	.pop--left .pop__container {
		left: 0;
		top: 50%;
		-webkit-transform: translate3d(-100%, -50%, 0);
		transform: translate3d(-100%, -50%, 0)
	}
		
	.pop--show.pop--left .pop__container {
		-webkit-transform: translate3d(0, -50%, 0);
		transform: translate3d(0, -50%, 0)
	}
		
	.pop--right .pop__container {
		right: 0;
		top: 50%;
		left: auto;
		-webkit-transform: translate3d(100%, -50%, 0);
		transform: translate3d(100%, -50%, 0)
	}
		
	.pop--show.pop--right .pop__container {
		-webkit-transform: translate3d(0, -50%, 0);
		transform: translate3d(0, -50%, 0)
	}
		
	.pop--bottom .pop__container {
		top: auto;
		left: 50%;
		bottom: 0;
		-webkit-transform: translate3d(-50%, 100%, 0);
		transform: translate3d(-50%, 100%, 0)
	}
		
	.pop--show.pop--bottom .pop__container {
		-webkit-transform: translate3d(-50%, 0, 0);
		transform: translate3d(-50%, 0, 0)
	}
		
	.pop--top .pop__container {
		top: 0;
		left: 50%;
		-webkit-transform: translate3d(-50%, -100%, 0);
		transform: translate3d(-50%, -100%, 0)
	}
		
	.pop--show.pop--top .pop__container {
		-webkit-transform: translate3d(-50%, 0, 0);
		transform: translate3d(-50%, 0, 0)
	}
</style>
